/**
 * 自定义Input组件
 * by zhangxinyue
 * create 2020-08-28
 */
import React from 'react';
import PropTypes from 'prop-types';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Input, Tooltip } from 'antd';
import { FormItemLayout, NoLableLayout } from '../formPub';
import styles from './index.less';

const { TextArea } = Input;

class InputC extends React.PureComponent {
  static defaultProps = {
    onRef: () => {},
    title: '',
    initialValue: '',
    placeholder: '',
    helper: '',
    onChange: () => {},
    formItemLayout: FormItemLayout,
    disabled: false,
    tooltipInfo: '',
    showALLValue: false,
    labalWrap: false,
    rightContent: null, //右侧的内容
    allowClear: false,
  };

  constructor(props) {
    super(props);

    this.state = {
      tooltipInfo: props.initialValue ? <div style={{ maxWidth: '300px', wordBreak: 'break-all' }}>{props.initialValue}</div> : '', // 鼠标移动到组件，展示当前选中项全称
    };
  }
  componentDidMount() {
    // 父组件对本组件的引用
    this.props.onRef(this);
  }

  // 非初始化状态下更改下拉选项(供父组件调用)
  setInput = (str) => {
    const valueF = {};
    valueF[this.props.dataIndex] = str;
    this.props.form.setFieldsValue(valueF);
    if (this.props.showALLValue) this.setTooltip(e); //设置tooltip数据
  };
  onChange = (e) => {
    this.props.onChange(e); //抛出数据
    if (this.props.showALLValue) this.setTooltip(e); //设置tooltip数据
  };
  setTooltip = (e) => {
    this.setState({
      tooltipInfo: e.target.value == '' ? '' : <div style={{ maxWidth: '300px', wordBreak: 'break-all' }}>{e.target.value}</div>,
    });
  };
  //右侧内容点击效果
  rightBtnHandleClick = () => {
    this.props.rightContentClick && this.props.rightContentClick();
  };
  render() {
    const {
      autocomplete,
      form,
      title,
      dataIndex,
      initialValue,
      placeholder,
      rightContent,
      rightBtnWrapStyle,
      onChange,
      onBlur,
      helper,
      prefix,
      suffix,
      formItemLayout,
      disabled,
      type,
      max,
      allowClear,
      labalWrap,
      showTextArea,
      autosize,
      style,
      styleRow,
    } = this.props;
    const { getFieldDecorator } = form;

    return (
      <Form.Item
        labelCol={title ? formItemLayout.labelCol : NoLableLayout.labelCol}
        wrapperCol={title ? formItemLayout.wrapperCol : NoLableLayout.wrapperCol}
        className={labalWrap ? 'labalWrap' : ''}
        label={
          title ? (
            helper ? (
              <span>
                {title}&nbsp;
                <Tooltip title={helper}>
                  <QuestionCircleOutlined />
                </Tooltip>
              </span>
            ) : (
              <span>{title}</span>
            )
          ) : undefined
        }
      >
        <div className='rightContentBtn' style={rightContent ? { position: 'relative', display: 'inline-flex', alignItems: 'center', width: '100%' } : {}}>
          <div style={rightContent ? { width: 'calc(100% - 30px)', display: 'flex' } : { width: '100%' }}>
            {!showTextArea && (
              <Tooltip title={this.props.showALLValue ? this.state.tooltipInfo : ''}>
                {getFieldDecorator(dataIndex, {
                  initialValue,
                  rules: !!this.props.rules ? this.props.rules : [],
                  getValueFromEvent: (event) => {
                    return event.target !== undefined ? event.target.value.replace(/\s+/g, '') : event;
                  },
                })(
                  <Input
                    placeholder={placeholder}
                    onChange={this.onChange}
                    onBlur={onBlur}
                    prefix={prefix}
                    suffix={suffix}
                    disabled={disabled}
                    type={type}
                    allowClear
                    maxLength={max}
                    style={style ? style : styleRow ? styleRow : null}
                  />,
                )}
              </Tooltip>
            )}

            {showTextArea &&
              getFieldDecorator(dataIndex, {
                initialValue,
                rules: !!this.props.rules ? this.props.rules : [],
              })(
                <TextArea
                  placeholder={placeholder}
                  onChange={onChange}
                  disabled={disabled}
                  onBlur={onBlur}
                  maxLength={max}
                  autosize={autosize}
                  style={style ? style : styleRow ? styleRow : { marginTop: '5px' }}
                />,
              )}
          </div>
          {rightContent && (
            <div className={styles.rightBtnWrap} style={rightBtnWrapStyle ? rightBtnWrapStyle : null} onClick={this.rightBtnHandleClick}>
              {rightContent}
            </div>
          )}
        </div>
      </Form.Item>
    );
  }
}

// props类型
InputC.propsTypes = {
  form: PropTypes.object, // form对象
  title: PropTypes.string, // 显示名称
  dataIndex: PropTypes.string, // Form识别的Item ID
  initialValue: PropTypes.string, // 初始默认值
  placeholder: PropTypes.string, // 占位符
  onChange: PropTypes.func, // 输入框内容变化时的回调
  helper: PropTypes.oneOfType([
    // 提示帮助信息
    PropTypes.string,
    PropTypes.element,
  ]),
  prefix: PropTypes.element, // input前缀图标
  suffix: PropTypes.element, // input后缀图标
  rules: PropTypes.array, // 校验规则
  formItemLayout: PropTypes.object, // 布局
  disabled: PropTypes.bool, // 禁用
  max: PropTypes.number, // 最大长度
  onRef: PropTypes.func, // 本组件的引用（可用来父组件调用内部方法）

  showTitle: PropTypes.bool, // 是否展示输入框名称
  autocomplete: PropTypes.string, // 自动填充
};
export default InputC;
